
<template>
  <div class="timer">
    {{mode}}
    <el-radio-group v-model="mode" size="large">
      <el-radio-button :label="1">数字</el-radio-button>
      <el-radio-button :label="2">中文</el-radio-button>
      <el-radio-button :label="3">罗马</el-radio-button>
    </el-radio-group>
    <div class="home">
      <div class="timer-box center-circle">
      </div>
      <div class="timer-box split time-1" :style="{transform:`rotate(${time1_rotate}deg)`}">
        <div class="tag" :style="{transform:`rotate(${item}deg)`}" v-for="(item,index) in getTagDiv(3)" :key="index">
          <div class="content" :class="{'content-active':isActive('time1',index)}">
            <template v-if="mode == 1">{{numberFormat[index]}}</template>
            <template v-else-if="mode == 2">{{chineseFormat[index]}}</template>
            <template v-else-if="mode == 3">{{romanFormat[index]}}</template>
          </div>
        </div>
      </div>
      <div class="timer-box time-2" :style="{transform:`rotate(${time2_rotate}deg)`}" >
        <div class="tag" :style="{transform:`rotate(${item}deg)`}" v-for="(item,index) in getTagDiv(10)" :key="index">
          <div class="content" :class="{'content-active':isActive('time2',index)}">
            <template v-if="mode == 1">{{numberFormat[index]}}</template>
            <template v-else-if="mode == 2">{{chineseFormat[index]}}</template>
            <template v-else-if="mode == 3">{{romanFormat[index]}}</template></div>
          </div>
      </div>
      <div class="timer-box split minutes-1" :style="{transform:`rotate(${minutes1_rotate}deg)`}">
        <div class="tag" :style="{transform:`rotate(${item}deg)`}" v-for="(item,index) in getTagDiv(6)" :key="index">
          <div class="content" :class="{'content-active':isActive('minutes1',index)}">
            <template v-if="mode == 1">{{numberFormat[index]}}</template>
            <template v-else-if="mode == 2">{{chineseFormat[index]}}</template>
            <template v-else-if="mode == 3">{{romanFormat[index]}}</template>
          </div>
        </div>
      </div>
      <div class="timer-box minutes-2" :style="{transform:`rotate(${minutes2_rotate}deg)`}">
        <div class="tag" :style="{transform:`rotate(${item}deg)`}" v-for="(item,index) in getTagDiv(10)" :key="index">
          <div class="content" :class="{'content-active':isActive('minutes2',index)}">
            <template v-if="mode == 1">{{numberFormat[index]}}</template>
            <template v-else-if="mode == 2">{{chineseFormat[index]}}</template>
            <template v-else-if="mode == 3">{{romanFormat[index]}}</template>
          </div>
        </div>
      </div>
      <div class="timer-box split second-1" :style="{transform:`rotate(${second1_rotate}deg)`}">
        <div class="tag" :style="{transform:`rotate(${item}deg)`}" v-for="(item,index) in getTagDiv(6)" :key="index">
          <div class="content" :class="{'content-active':isActive('second1',index)}">
            <template v-if="mode == 1">{{numberFormat[index]}}</template>
            <template v-else-if="mode == 2">{{chineseFormat[index]}}</template>
            <template v-else-if="mode == 3">{{romanFormat[index]}}</template>
          </div>
        </div>
      </div>
      <div class="timer-box second-2" :style="{transform:`rotate(${second2_rotate}deg)`}">
        <div class="tag" :style="{transform:`rotate(${item}deg)`}" v-for="(item,index) in getTagDiv(10)" :key="index">
          <div class="content" :class="{'content-active':isActive('second2',index)}">
            <template v-if="mode == 1">{{numberFormat[index]}}</template>
            <template v-else-if="mode == 2">{{chineseFormat[index]}}</template>
            <template v-else-if="mode == 3">{{romanFormat[index]}}</template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'

  const numberFormat = ['0','1','2','3','4','5','6','7','8','9']
  const chineseFormat = ['零','壹','贰','叁','肆','伍','陆','柒','捌','玖']
  const romanFormat = ['0','Ⅰ','Ⅱ','Ⅲ','Ⅳ','Ⅴ','Ⅵ','Ⅶ','Ⅷ','Ⅸ']


  const mode = ref(1)

  const time1_rotate = ref(0)
  const time2_rotate = ref(0)
  const minutes1_rotate = ref(0)
  const minutes2_rotate = ref(0)
  const second1_rotate = ref(0)
  const second2_rotate = ref(0)

  const timeArr = ref([0,0,0,0,0,0])

  const getTagDiv = (count:number)=>{
    let arr = []
    for(let a = 0 ;a < count ;a++){
      arr.push((360/count)*a)
    }
    return arr
  }

  const isActive = (target:String,nowTime:Number)=>{
    if(target == 'time1'){
      if(timeArr.value[0] == nowTime)return true
    }if(target == 'time2'){
      if(timeArr.value[1] == nowTime)return true
    }if(target == 'minutes1'){
      if(timeArr.value[2] == nowTime)return true
    }if(target == 'minutes2'){
      if(timeArr.value[3] == nowTime)return true
    }if(target == 'second1'){
      if(timeArr.value[4] == nowTime)return true
    }if(target == 'second2'){
      if(timeArr.value[5] == nowTime)return true
    }
    return false
  }

  const setTimer = () =>{
    const now = new Date()
    
    let hour:any = now.getHours()
    let minute:any = now.getMinutes()
    let second:any = now.getSeconds()

    if(hour<10) hour = '0'+hour
    if(minute<10) minute = '0'+minute
    if(second<10) second = '0'+second

    const timeStr = `${hour}${minute}${second}`.split('').map(el=>Number(el))
    timeArr.value = timeStr

    time1_rotate.value = 360 - ((360/3)*timeStr[0])
    time2_rotate.value = 360 - ((360/10)*timeStr[1])
    minutes1_rotate.value = 360 - ((360/6)*timeStr[2])
    minutes2_rotate.value = 360 - ((360/10)*timeStr[3])
    second1_rotate.value = 360 - ((360/6)*timeStr[4])
    second2_rotate.value = 360 - ((360/10)*timeStr[5])

  }
  
  setInterval(() => {
    setTimer()
  }, 200);

</script>
<style lang="scss" scoped>
@font-face{
  font-family: 'Deemo';
  src: url('../../assets/Deemo.ttf');
}

.timer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .home{
    background: black;
    transform: rotate(90deg);
    border: 1px solid #DAA520;
    width: 800px;
    height: 800px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .timer-box{
      border-radius: 100%;
      border: 4px solid #DAA520;
      position: absolute;
      display: flex;
      justify-content: center;
      transition: all .2s ease;
      .tag{
        position: absolute;
        height: 100%;
        .content{
          font-family: Deemo;
          color:#B8860D;
          font-size: 36px;
          transform: rotate(-90deg);
          transition: all .5s ease;
        }
        .content-active{
          color: white;
          transform: rotate(-90deg) scale(1.2);
        }
      }
    }
    .split{
      border-color: #4C3E27;
    }
    .center-circle{
      width: 100px;
      height: 100px;
    }
    .time-1{
      width: 200px;
      height: 200px;
    }
    .time-2{
      width: 300px;
      height: 300px;
    }
    .minutes-1{
      width: 400px;
      height: 400px;
    }
    .minutes-2{
      width: 500px;
      height: 500px;
    }
    .second-1{
      width: 600px;
      height: 600px;
    }
    .second-2{
      width: 700px;
      height: 700px;
    }
  }
}

</style>
